<template>
  <div style="height: 100%;width: 100%;overflow-y: hidden">
    <div style="height: 50px;width: 100%">
      <n-space justify="space-between">
        <n-space>
          <n-dropdown
              :options="options.download"
              placement="bottom-start"
              trigger="hover"
              @select="handleAction"
          >
            <n-button type="primary"  tertiary>
              下载日行情
            </n-button>
          </n-dropdown>
          <n-dropdown
              :options="options.ma"
              placement="bottom-start"
              trigger="hover"
              @select="handleAction"
          >
            <n-button type="success"  tertiary>
              MAn
            </n-button>
          </n-dropdown>
          <!--          <n-button type="success" @click="openMAnDialog">-->
          <!--            计算MAn-->
          <!--          </n-button>-->
          <n-dropdown
              :options="options.macd"
              placement="bottom-start"
              trigger="hover"
              @select="handleAction"
          >
            <n-button type="success"  tertiary>
              MACD
            </n-button>
          </n-dropdown>
          <!--          <n-button type="success" @click="openMacdDialog">-->
          <!--            计算MACD-->
          <!--          </n-button>-->
          <!--          <n-button type="success" @click="openResetMacdDialog">-->
          <!--            重置MACD-->
          <!--          </n-button>-->
          <n-dropdown
              :options="options.kdj"
              placement="bottom-start"
              trigger="hover"
              @select="handleAction"
          >
            <n-button type="success"  tertiary>
              KDJ
            </n-button>
          </n-dropdown>
          <!--          <n-button type="success" @click="openKdjDialog">-->
          <!--            计算KDJ-->
          <!--          </n-button>-->
        </n-space>
        <!--        <n-space>-->
        <n-input-group>
          <!--          <n-input-group-label>股票代码</n-input-group-label>-->
          <n-input placeholder="请输入股票代码" v-model:value="stockCode" style="width: 120px" maxlength="6"
                   @keyup="getDailyEntitiesByStockCode"/>
          <n-button type="primary"  tertiary @click="getDailyEntitiesByStockCode">
            <template #icon>
              <n-icon>
                <SearchOutline/>
              </n-icon>
            </template>
          </n-button>
          <n-button type="warning" tertiary @click="deleteHisDailyData">
            删除历史
          </n-button>
        </n-input-group>
        <!--          <n-button type="warning" @click="deleteHisDailyData">-->
        <!--            删除历史行情-->
        <!--          </n-button>-->
        <!--        </n-space>-->


      </n-space>
    </div>
    <div style="height: 100%;width: 100%;overflow-y: scroll">
      <n-data-table
          striped
          :columns="columns"
          :data="data"

      />
    </div>
  </div>
  <n-modal v-model:show="showDialog"
           preset="card"
           draggable
           :closable="!commonStore.loading"
           :title="dialogTitle"
           class="w-600px h-400px"
           :close-on-esc="false"
           :mask-closable="false">
    <ExecuteDialog :action="action" :btnLabel="btnLabel"/>
  </n-modal>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import ExecuteDialog from "../components/ExecuteDialog.vue";
import {useCommonStore} from "../store/common";
import {MarketService} from "../../bindings/quant/backend/service";
import {DailyEntity} from "../../bindings/quant/backend/entity/index.js";
import {SearchOutline} from "@vicons/ionicons5";
import {NButton} from "naive-ui";

const commonStore = useCommonStore()

const showDialog = ref(false)
const stockCode = ref("")
const dialogTitle = ref("")
const action = ref("")
const btnLabel = ref("")
const options = {
  download: [{
    label: '下载今日行情',
    key: 'downloadToday'
  },
    {
      label: '下载昨日行情',
      key: 'downloadTomorrow'
    },
    {
      label: '自定义范围',
      key: 'downloadCustom'
    }],
  ma: [{
    label: '计算今日MAn',
    key: 'maToday'
  },
    {
      label: '计算昨日MAn',
      key: 'maTomorrow'
    },
    {
      label: '自定义范围',
      key: 'maCustom'
    }, {
      label: '重置MAn',
      key: 'maReset'
    }],
  macd: [{
    label: '计算今日MACD',
    key: 'macdToday'
  },
    {
      label: '计算昨日MACD',
      key: 'macdTomorrow'
    },
    {
      label: '自定义范围',
      key: 'macdCustom'
    }, {
      label: '重置MACD',
      key: 'macdReset'
    }],
  kdj: [{
    label: '计算今日KDJ',
    key: 'kdjToday'
  },
    {
      label: '计算昨日KDJ',
      key: 'kdjTomorrow'
    },
    {
      label: '自定义范围',
      key: 'kdjCustom'
    }, {
      label: '重置KDJ',
      key: 'kdjReset'
    }],
}

const columns = [
  {
    title: "时间",
    key: "time",
    width: 120
  },
  {
    title: "股票代码",
    key: "stock_code",
    width: 120
  },
  {
    title: "股票名称",
    key: "stock_name",
    width: 120
  },
  {
    title: "开盘价",
    key: "open",
    width: 120
  },
  {
    title: "收盘价",
    key: "close",
    width: 120
  },
  {
    title: "最高价",
    key: "high",
    width: 120
  },
  {
    title: "最低价",
    key: "low",
    width: 120
  },
  // {
  //   title: "成交量",
  //   key: "volume"
  // },
  // {
  //   title: "成交额",
  //   key: "amount"
  // },
  {
    title: "昨收价",
    key: "pre_close",
    width: 120
  },
  {
    title: "停牌标志",
    key: "suspend_flag",
    width: 120
  },
  {
    title: "换手率",
    key: "turnout_rate",
    width: 120
  },
  // {
  //   title: "涨停价",
  //   key: "up_stop_price"
  // },
  // {
  //   title: "跌停价",
  //   key: "down_stop_price"
  // },
  // {
  //   title: "总股本",
  //   key: "total_volume"
  // },
  // {
  //   title: "流通股本",
  //   key: "float_volume"
  // },
  // {
  //   title: "总市值",
  //   key: "total_amount"
  // },
  // {
  //   title: "流通市值",
  //   key: "float_amount"
  // },
  {
    title: "5日均价",
    key: "ma5",
    width: 150
  }, {
    title: "10日均价",
    key: "ma10",
    width: 150
  },
  {
    title: "20日均价",
    key: "ma20",
    width: 150
  }
];
let data = ref<DailyEntity[]>()

const handleAction = (key: string | number) => {
  switch (key) {
    case "downloadToday":
      openExecuteDialog("下载今日行情", "downloadToday")
      break
    case "downloadTomorrow":
      openExecuteDialog("下载昨日行情", "downloadTomorrow")
      break
    case "downloadCustom":
      openExecuteDialog("自定义范围下载行情", "downloadCustom")
      break

    case "maToday":
      openExecuteDialog("计算今日MAn", "maToday")
      break
    case "maTomorrow":
      openExecuteDialog("计算昨日MAn", "maTomorrow")
      break
    case "maCustom":
      openExecuteDialog("自定义范围计算MAn", "maCustom")
      break
    case "maReset":
      openExecuteDialog("重置MAn", "maReset")
      break

    case "macdToday":
      openExecuteDialog("计算今日MACD", "macdToday")
      break
    case "macdTomorrow":
      openExecuteDialog("计算昨日MACD", "macdTomorrow")
      break
    case "macdCustom":
      openExecuteDialog("自定义范围计算MACD", "macdCustom")
      break
    case "macdReset":
      openExecuteDialog("重置MACD", "macdReset")
      break

    case "kdjToday":
      openExecuteDialog("计算今日KDJ", "kdjToday")
      break
    case "kdjTomorrow":
      openExecuteDialog("计算昨日KDJ", "kdjTomorrow")
      break
    case "kdjCustom":
      openExecuteDialog("自定义范围计算KDJ", "kdjCustom")
      break
    case "kdjReset":
      openExecuteDialog("重置KDJ", "kdjReset")
      break
  }
}

// 打开对话框
const openExecuteDialog = (title: string, act: string) => {
  dialogTitle.value = title
  action.value = act
  btnLabel.value = "执行"
  showDialog.value = true
}

// 清除历史日行情数据
const deleteHisDailyData = () => {
  window.$dialog?.warning({
    title: "确认",
    content: "确定要清除历史日行情数据吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      MarketService.DeleteHisDailyData().then((result) => {
        console.log(result)
      }).catch((err) => {
        console.log("清除历史日行情数据出错：" + err);
      }).finally(() => {
        commonStore.loading = false
      });
    }
  })
}

const getDailyEntitiesByStockCode = () => {
  if (stockCode.value && stockCode.value.length == 6) {
    let code = stockCode.value
    if (code.startsWith("300") || code.startsWith("000")) {
      code = code + ".SZ"
    } else {
      code = code + ".SH"
    }
    MarketService.GetDailyEntitiesByStockCode(code).then((result: DailyEntity[]) => {
      data.value = result
    }).catch((err) => {
      console.log("获取日行情数据出错：" + err);
    }).finally(() => {
      commonStore.loading = false
    });
  }
}

onMounted(() => {

})
</script>


<style scoped>

</style>